<template>
  <div class="search">
    <input
      type="text"
      placeholder="请输入你的任务名称,回车键确认"
      @keyup.enter="add"
      v-model="title"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'Header',
  props: {
    addTodos: {
      type: Function,
      required: true
    }
  },
  setup (props) {
    const title = ref('')
    const add = () => {
      const text = title.value
      if (!text.trim()) return
      const todo = {
        id: Date.now(),
        title: text,
        iscompleted: false
      }
      props.addTodos(todo)
      title.value = ''
    }
    return {
      add,
      title
    }
  }
})
</script>
<style scoped lang="less">
.search {
  width: 100%;
  input {
    width: 100%;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 10px;
    outline: none;
    box-sizing: border-box;
    padding: 0 10px;
  }
  input:focus {
    border: 1px solid #bfa;
  }
}
</style>
